<!--
***我的买手***
-->
<template>
  <div class="main">
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>买手</h3>
      </div>
    </v-header>
    <div class="notice" v-if="noticeList&&noticeList.length>0">
      <ul ref="noticeul" :style="css.cssTop">
        <li  v-for="(item, index) in noticeList" class="ellipsis" :key="index" style="position:relative;top:1px;">{{item}}</li>
      </ul>
    </div>
    <div class="des"></div>
    <p class="unfold-bottom" @click="shareFn">邀请好友得奖励</p>

    <div class="distributor">
      <div class="distributor-title">
        <span>我的买手（{{childCount.count}}）</span>
        <span class="added">近7日新增{{childCount.increment}}人</span>
      </div>
      <div class="distributor-list">
        <distribution-empty :showType="4" v-if="distributorData.length === 0"></distribution-empty>

        <div class="distributor-item" v-for="(item,index) in distributorData" :key="index">
          <img :src="item.icon" class="distributor-item-img">
          <div class="distributor-item-left">
            <p class="distributor-item-phone">{{item.telephone}}
              <span v-if="item.recent">新加入</span>
            </p>
            <p class="distributor-item-date">注册时间：{{item.registtime}}</p>
          </div>
          <div class="distributor-item-right">
            <p class="distributor-item-money">+{{item.history}}</p>
            <p v-if="item.ordercount" class="distributor-item-order-num">下单数量：{{item.ordercount}}单</p>
            <p v-else class="distributor-item-order-num">暂未下单纪录哦</p>
          </div>
        </div>
      </div>
    </div>
    <div class="shareTips" v-if="isTips">
      <img src="/static/img/d_tips.png" class="tips" alt="">
      <img src="/static/img/d_ok.png" @click="okFn" class="btn" alt="">
    </div>
  </div>
</template>
<script>
import { getUrlParam, DateFormat } from '@/common/util'
import { mychildIncome, myChildCount, shareToBeDistributionUrl, message } from '../../common/api/distribution'
import DistributionEmpty from './DistributionEmpty'
export default {
  components: {
    DistributionEmpty
  },

  data() {
    return {
      distributorData: [],
      distributionId: window.localStorage.getItem('distributionId'),
      childCount: {},
      shareInfo: {},
      isTips: false,
      noticeList: [],
      css: {
        popup: false,
        cssTop: {
          top: 0
        }
      },
    }
  },
  created() {
    if (this.$root.ISAPP) {
      window.document.title = '买手'
      this.distributionId = this.getCurrentUser().distributionId
    } else {
      if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
        this.$router.push(`/login`)
      }
    }
    let opt = {
      distributionid: this.distributionId
    }
    console.log('distributionid: ', this.distributionId)
    mychildIncome(opt).then(res => {
      if(res){
        let ms = 7*24*60*60*1000
        res = res.map(item=>{
          if(Date.now() - Date.parse(DateFormat(item.registtime,'yyyy/MM/dd HH:mm:ss')) < ms){
            item.recent = true
          }
          item.telephone = this.blurPhone(item.telephone)
          return item
        })
        console.log('distributorData',res)
        this.distributorData = res
      }
    })
    myChildCount(opt).then(res => {
      this.childCount = res
    })
    message(opt).then(res => {
      if (res && res.length > 0) {
        res = res.filter(item=>{
          return Number(item.type) !== 1
        })
        this.noticeList = res.map(item => {
          if (item.type === 0) {
            item.pmobile = this.blurPhone(item.pmobile)
            item.umobile = this.blurPhone(item.umobile)
            return `${item.pmobile || '用户xx'} 邀请 ${item.umobile || '用户xx'} 成为买手`
          } else if (item.type === 1) {
            item.pmobile = this.blurPhone(item.pmobile)
            return `${item.pmobile || '用户xx'} 获得 ¥${item.withdraw || 10} 佣金收入`
          } else {
            item.umobile = this.blurPhone(item.umobile)
            return `${item.umobile || '用户xx'} 注册成为分销商`
          }
        })
        this.$nextTick(() => { this.notice() })
      }
    })
    shareToBeDistributionUrl({
      parentid: this.distributionId
    }).then(res => {
      console.log('shareInfo', res)
      this.shareInfo = res.shareinfo
      this.initShare({
        info:{
          title:res.shareinfo.title,
          desc:res.shareinfo.content,
          img:res.shareinfo.icon,
          url:res.shareinfo.url
        }
      })
    })
  },

  methods: {
    notice() {
      var Ttime = null
      var TOPval = 0
      var _ = this
      let Height = this.$refs.noticeul.getBoundingClientRect().height
      clearInterval(Ttime)
      Ttime = setInterval(() => {
        TOPval += Height
        _.css.cssTop.top = -TOPval + 'px'
        if (TOPval > Height * (_.noticeList.length - 1)) {
          _.css.cssTop.top = 0
          TOPval = 0
        }
      }, 3000)
    },
    shareFn() {
      console.log('distributionid: ', this.distributionId, this.shareInfo)
      if (this.$root.ISAPP) {
        let opt = {
          name: 'callAppShareDialog',
          params: {
            sharetitle: this.shareInfo.title,
            sharecontent: this.shareInfo.content,
            sharepicurl: this.shareInfo.icon,
            shareurl: this.shareInfo.url,
            xcxurl: this.shareInfo.scene
          }
        }
        this.javascriptBridge(opt)
      } else if (this.$root.ISWX) {
        this.isTips = true
      } else {
        if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
          this.$router.push(`/login`)
          return
        }

        this.loadApp()
      }

    },
    blurPhone(phone) {
      phone = phone.replace('+86-','')
      return phone.substr(0, 3) + '*****' + phone.substr(8)
    },
    okFn() {
      this.isTips = false
    }
  }
}
</script>
<style lang='scss' scoped>
.notice {
  width: 100%;
  height: 24px;
  background-color: rgb(126, 107, 37);
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  padding: 0 4vw;
  position: relative;
  overflow: hidden;
  &::before{
    content: '';
    width: 14px;
    height: 14px;
    float: left;
    background: url(/static/img/d_notice.png);
    background-size: 14px 14px;
    margin: 5px 5px 0 0;
  }
  ul{
    height: 24px;
    position: absolute;
    transition: all .1s linear;
    top: 0;
    left: 35px;
  }
}
.main {
  color: rgb(51, 51, 51);
}
.des {
  font-size: 20px;
  color: rgb(51, 51, 51);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 58.67vw;
  background: url(/static/img/d_share_bg.png);
  background-size: 100% 100%;
}
.activity-time {
  font-size: 14px;
  margin-top: 4vw;
}
.unfold-bottom {
  width: 58.67vw;
  height: 10.67vw;
  background-color: #333;
  display: flex;
  color: #fff;
  justify-content: center;
  align-items: center;
  margin: 5.07vw auto 0;
  border-radius: 4px;
}
.distributor-title {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 4.27vw;
  height: 10.4vw;
  margin-top: 5.6vw;
  span{
    font-weight: bold;
    border-left: 3px solid #333;
    padding-left: 10px;
    font-size: 17px;
    height: 16px;
    line-height: 16px;
  }
  .added{
    color: #999;
    font-size: 12px;
    font-weight: normal;
    border-left: none;
    padding-left: 0;
  }
}
.distributor-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 7.47vw 0 4vw;
  height: 18.4vw;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
}
.distributor-item-left{
  position: absolute;
  left: 16vw;
}
.distributor-item-img {
  width: 9.33vw;
  height: 9.33vw;
  border-radius: 50%;
}
.distributor-item-phone {
  font-size: 14px;
  position: relative;
  margin-bottom: 5px;
}
.distributor-item-phone span {
  background-color: #FFC700;
  padding: 2px 3px;
  font-size: 8px;
  color: #fff;
  border-radius: 2px;
  margin-left: 4px;
}
.distributor-item-date{
  font-size: 10px;
  color: rgb(102, 102, 102);
  margin-top: 2px;
}
.distributor-item-right{
  float: right;
  text-align: right;
}
.distributor-item-money{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.distributor-item-order-num{
  font-size: 10px;
  color: rgb(153, 153, 153);
}
.shareTips{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 100;
  .tips{
    position: absolute;
    width: 54vw;
    height: 50vw;
    top: 12vw;
    right: 8vw;
  }
  .btn{
    width: 44.8vw;
    height: 16.53vw;
    position: absolute;
    top: 83vw;
    left: 27vw;
  }
}
</style>


